<template>
    <div class="app-container">
      <div class="container-head">
      </div>
      <div class="container-content">
        <div class="container-content-button">
          </div>
          <div class="container-content-table">
              <a-table :columns="columns" :data="tableList" :loading="loading" row-key="id"  :pagination="false" >
                <template #status="{ record }">
                  <span v-if="record.status == 1">未发送</span>
                  <span v-if="record.status == 2">发送中</span>
                  <span v-if="record.status == 3">已发送</span>
                  <span v-if="record.status == 4">失败</span>
              </template>
              </a-table>
              <div class="_crud-footer mt-3 text-right" ref="crudFooterRef">
                <a-pagination
                  :total="pageList.total"
                  show-total show-jumper show-page-size
                  @page-size-change="getList"
                  @change="getList"
                  v-model:current="form.page"
                  v-model:page-size="form.pageSize"
                  style="display: inline-flex"
                />
              </div>
          </div>
      </div>
    </div>
  </template>
  <script setup>
  import { reactive,ref,getCurrentInstance } from 'vue';
  import { getListByUser , getListByUserDetail} from '@/api/america/massProduction.js'
  import { getProjectList } from '@/api/cloud/client.js'
  import { useRouter, useRoute } from "vue-router";
  const { proxy } = getCurrentInstance();
  const router = useRouter();
  const route = useRoute()
  const loading = ref(true)
  const columns = [
        {
          title: '号码',
          dataIndex: 'target_phone_number',
          minWidth:150,
          slotName: 'target_phone_number',
          align:'center'
        },
        {
          title: '消息内容',
          dataIndex: 'message_content',
          minWidth:150,
          slotName: 'message_content',
          align:'center',
          ellipsis: true
        },
        {
          title: '状态',
          dataIndex: 'status',
          minWidth:150,
          slotName: 'status',
          align:'center'
        },
        {
          title: '创建时间',
          dataIndex: 'created_at',
          minWidth:150,
          slotName: 'created_at',
          align:'center'
        },
      ];
  
      const form = ref({
        task_name: '',
        page: 1,
        pageSize: 10
      })
  form.value.task_id = route.query.id
  const tableList = ref([])
  const pageList = ref({})
  // 获取列表数据
  const getList = () => {
    getListByUserDetail(form.value).then((res) => {
      tableList.value = res.data.items
      pageList.value = res.data.pageInfo
      loading.value = false
    })
  }
  getList()
  // 获取项目列表
  const projectList = ref([])
  const getProject = () => {
    getProjectList().then((res) => {
      projectList.value = res.data.items
    })
  }

  </script>
  <script> export default { name: 'korea:taskDetail' } </script>
  <style lang="less" scoped>
      .app-container{
          background-color: white;
          .container-head{
              padding: 20px;
              .formButton{
                display: flex;
                justify-content: center;
                align-items: center;
              }
          }
          .container-content{
              padding: 16px;
              .container-content-button{
                margin-bottom: 10px;
                .arco-btn{
                  margin-right: 10px
                }
              }
          }
      }
      .dialog-foot{
        text-align: end
      }
  </style>